<template>
    <div class="echart-container echart-container-right">
        <ElectricComp></ElectricComp>
        <TempHumidityComp></TempHumidityComp>
        <DeviceRunTimeComp></DeviceRunTimeComp>

<!--        <div class="item-content  bg-img" v-for="val in [1]">-->
<!--            <div class="item-title bg-img"><span>报警统计</span></div>-->
<!--            <div class="main">-->
<!--                <Echart1 ></Echart1>-->
<!--            </div>-->
<!--        </div>-->


    </div>
</template>

<script setup>
    import { onMounted, defineAsyncComponent } from "vue";
    const Echart1 = defineAsyncComponent(() => import('@/components/echarts/alramEchart.vue'));
    const ElectricComp = defineAsyncComponent(() => import('@/components/electric/index.vue'));
    const TempHumidityComp = defineAsyncComponent(() => import('@/components/tempHumidity/index.vue'));
    const DeviceRunTimeComp = defineAsyncComponent(() => import('@/components/deviceRunTime/index.vue'));
</script>

<style lang="scss" scoped>
    .echart-container{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        position: absolute;
        bottom: 1%;
        width: 22%;
        top: 8%;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .echart-container::-webkit-scrollbar {
        display: none;
    }


    .echart-container-right {
        margin: 0 10px;
        right: 0;
    }

</style>
